<template>
  <div class="el-toast">
    <div class="el-icon el-toast__icon">
      <i class="el-icon-loading" v-if="type === 'loading' && !custom" />
      <slot name="icon" v-if="custom" />
    </div>
    <div class="el-toast__text">{{text}}</div>
  </div>
</template>

<script>
/*
  @text: 显示的文字内容 type{String}
  @type: 图表类型 type{String}
  @custom： 是否需要自定义图片 type{Boolean}
  通过插槽植入图片 slot="icon"
*/
  export default {
    name: 'toast',
    props: {
      text: {
        type: String,
        default: '加载中...'
      },
      type: {
        type: String,
        default: 'loading'
      },
      custom: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-toast{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;
    width: 88px;
    max-width: 70%;
    min-height: 88px;
    padding: 16px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    white-space: pre-wrap;
    text-align: center;
    word-wrap: break-word;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    .el-icon{
      position: relative;
      display: inline-block;
      font-size: inherit;
      text-rendering: auto;
    }
    .el-toast__icon{
      font-size: 34px;
    }
    .el-toast__text{
      margin-top: 8px;
    }
  }
</style>
